<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style>
    #tab,#tab1{width:800px;margin: auto;}
    #tab tr td,#tab tr th,#tab1 tr th,#tab1 tr td{border: 1px solid #000; text-align: center;}
    #tab tr th,#tab1 tr th{ background-color: #eee;}
    input{width:120px;}
</style>
</head>
<body>
    
    <h3 style="text-align: center;">真划算</h3>
    <table class="table table_bordered,table table-hover" id="tab">
        <thead>
            <tr>
                <th>商品</th>
                <th> 单价(元)</th>
                <th>颜色</th>
                <th>库存</th>
                <th>好评率</th>
             
            </tr>
        </thead>
        <tbody id="buycard">
            <tr>
                <td>罗技M185鼠标</td>
                <td> 80</td>
                <td> 黑色</td>
                <td> 892</td>
                
                <td><button>加入购物车</button></td>
            </tr>
            <tr>
                <td>微软X470键盘
                    </td>
                <td> 150</td>
                <td>黑色</td>
                <td>9027</td>
             
                <td><button>加入购物车</button></td>
            </tr>
            <tr>
                <td>洛克iphone6手机壳</td>
                <td> 60</td>
                <td> 透明</td>
                <td>671</td>
             
                <td><button>加入购物车</button></td>
            </tr>
            <tr>
                <td>蓝牙耳机 </td>
                <td> 100</td>
                <td>蓝色</td>
                <td>8936</td>
            
                <td><button>加入购物车</button></td>
            </tr>
            <tr>
                <td>金士顿U盘 </td>
                <td>70</td>
                <td> 红色</td>
                <td>481</td>
         
                <td><button>加入购物车</button></td>
            </tr>

        </tbody>  
    </table>
    <h3 style="text-align: center;">购物车</h3>
    <table class="table table_bordered,table table-hover" id="tab1">
        <thead>
            <tr>
                <th>商品</th>
                <th> 单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th> 删除</th>
               
            </tr>
        </thead>
        <tbody id="goodlist">
            
        </tbody>
        <tfoot>
            <tr>
                <!-- colspan横向合并 合并列，rowspan纵向合并 合并行-->
                <td colspan="3">总计</td>  
                <td id="total"></td>
                <td></td>
            </tr> 
        </tfoot>
            </table>
           
            
    <script>
    $(function(){
        //点击添加
        $("button:contains('加入购物车')").click(function(){
           var shangpin =  $(this).parent().siblings().eq(0).html() //商品列
           var danjia = $(this).parent().siblings().eq(1).html() //单价
           var kucun  =  $(this).parent().siblings().eq(3).html()  //库存
           
          // console.log(kucun)
          if($(`#goodlist td:contains("${shangpin}")`).length>0){
              var num = $(`#goodlist td:contains("${shangpin}")`).next().next().children('input').val() // input里的数量
              $(`#goodlist td:contains("${shangpin}")`).next().next().children("[type='number']").val(+num+1)
              $(this).parent().siblings().eq(3).html(--kucun)
              var jin_e = (+num+1)*danjia //金额
              $(`#goodlist td:contains("${shangpin}")`).next().next().next().html(jin_e)
              tot()
          }else{
            $(this).parent().siblings().eq(3).html(--kucun) //库存减减

            /* 方法一 */
            var htmlstr = `
            <tr>
                <td>${shangpin}</td><td>${danjia}</td>
                <td> <button id='jian' onclick='lowfun(this)' name='${shangpin}'>-</button><input type='number' value='1' min=0><button id='jia'  onclick='upfun(this)' name='${shangpin}'>+</button></td>
                <td>${danjia}</td>
                <td><button  onclick='delfun(this)'>×</button></td>
            </tr>
            `
            $("#tab1 tbody").append($(htmlstr))
            /* 方法二 */
            // $("#tab1 tbody").append($("<tr><td>"+shangpin+"</td><td>"+danjia+"</td><td> <button id='jian' onclick='lowfun(this)'>-</button><input type='number' value='1' min=0><button id='jia'  onclick='upfun(this)'>+</button></td><td>"+danjia+"</td><td><button  onclick='delfun(this)'>×</button></td></tr>"))
            tot()
          }
          
           
        })
      
       
    })
        
    // 点击-号,减1
    function lowfun(obj){
      var txt = $(obj).next().val()  //$ 代表查找到obj这个变量
      if(txt<=1){
          return 
      } //购买商品的数量最低为1个
       $(obj).next().val(--txt)
       var goodname = $(obj).attr('name') //自定义属性
       console.log(goodname)
       var kucun = $(`#buycard td:contains("${goodname}")`).next().next().next().html() //库存 （点睛之笔，自定义属性，以商品种类作为媒介，使下面的表格和上面的关联起来）
     
      $(`#buycard td:contains("${goodname}")`).next().next().next().html(+kucun-1)
        console.log(kucun)
       var dan = $(obj).parent().prev().html()
       var jin_e = dan*txt
       $(obj).parent().next().html(jin_e)
      tot()
    }
     // 点击+号,加1
     function upfun(obj){
      var txt = $(obj).prev().val()
      var goodname = $(obj).attr('name')//自定义属性
      $(obj).prev().val(++txt) //数量
      var kucun = $(`#buycard td:contains("${goodname}")`).next().next().next().html()
      $(`#buycard td:contains("${goodname}")`).next().next().next().html(+kucun+1)
      console.log(kucun)
      var dan = $(obj).parent().prev().html() //单价
      var jin_e = dan*txt
       $(obj).parent().next().html(jin_e) //一种的总价
      tot()
    }

    // 删除
    function delfun(obj){
         $(obj).parent().parent().remove()
         tot()
    }
        
 
    // 金额合计
    function tot(){
        var table1_tr = $("#tab1 tbody tr")
        var str = 0
        for(var i=0;i<table1_tr.length;i++){
            var trs = table1_tr.eq(i)
            var jin_e = trs.children().eq(3).html(); //第四列 金额
             str += parseFloat(jin_e);
        }
        $("#total").html(str)
    }
        
    </script>
</body>
</html>